<style lang="scss" scoped>
	.tabbar {
		position: fixed;
		width: 100%;
		height: 130upx;
		left: 0;
		bottom: 0;
		z-index: 2;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: white;
		box-shadow: 0 0 4px 1px #f2f2f2;

		.tab {
			flex: 1;
			height: 10vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			color: $uni-text-color-grey;

			.icon {
				font-size: 24px;
				margin-bottom: 2px;
			}

			.icon-shop {
				font-size: 40px;
				margin-top: -24px;
			}

			&.active {
				color: $uni-color-navigator;
				font-weight: 500;

				.icon {
					color: $uni-color-navigator;
				}

			}

		}

	}

</style>

<template>
	<view class="tabbar">
		<view class="tab" :class="{'active': index == 0}" @click="tabClick('index')">
			<view class="icon icon-home" :class="{active: index == 0}"></view>
			<view>首页</view>
		</view>
		<view class="tab" :class="{'active': index == 1}" @click="tabClick('demand')">
			<view class="icon icon-demand" :class="{active: index == 1}"></view>
			<view>供求</view>
		</view>
		<view class="tab" :class="{'active': index == 2}" @click="tabClick('store')">
			<view class="icon icon-shop" :class="{active: index == 2}"></view>
			<view>商城</view>
		</view>
		<view class="tab" :class="{'active': index == 3}" @click="tabClick('enterprise')">
			<view class="icon icon-enterprise" :class="{active: index == 3}"></view>
			<view>企业库</view>
		</view>
		<view class="tab" :class="{'active': index == 4}" @click="tabClick('my')">
			<view class="icon icon-my" :class="{active: index == 4}"></view>
			<view>我的</view>
		</view>
	</view>
	<auth v-if="show_auth" @close="auth_close"></auth>
</template>

<script setup>
	import { ref } from 'vue'

	//隐藏系统tabbar
	const pages = getCurrentPages()
	if(pages.length){
		let currentPage = pages[pages.length - 1]
		let tabbarPage = [
			'pages/index/index',
			'pages/demand/index',
			'pages/store/index',
			'pages/enterprise/index',
			'pages/my/index',
		]
		if(tabbarPage.includes(currentPage.route)) {
			uni.hideTabBar()
		}
	}

	const props = defineProps({
		index: {
			type: [String,Number],
			default () {
				return 0
			}
		}
	})
	const show_auth = ref(false)
	const router = ref('')
	const tabClick = (route) => {
		router.value = route

		uni.switchTab({
			url: `/pages/${route}/index`
		})

	}


	const auth_close = (v) => {
		show_auth.value = false
	}


</script>
